<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <style>
        /* General Styles */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #app {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 350px;
        }

        h1 {
            text-align: center;
            color: #333;
            font-size: 24px;
            margin-bottom: 20px;
        }

        input[type="text"] {
            width: 80%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 16px;
            outline: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #218838;
        }

        /* Filter Styles */
        div {
            margin-bottom: 20px;
            text-align: center;
        }

        input[type="radio"] {
            margin-right: 5px;
        }

        label {
            margin-right: 15px;
            font-size: 14px;
        }

        /* Task List Styles */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        li:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .waiting {
            background-color: #f8d7da;
            color: #721c24;
        }

        .doing {
            background-color: #fff3cd;
            color: #856404;
        }

        .finished {
            background-color: #d4edda;
            color: #155724;
        }

        /* Delete Button Styles */
        li button {
            background-color: #dc3545;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            border: none;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        li button:hover {
            background-color: #c82333;
        }

        /* Media Queries for Responsive Design */
        @media (max-width: 400px) {
            #app {
                width: 100%;
                padding: 15px;
            }

            h1 {
                font-size: 20px;
            }

            button,
            input[type="text"] {
                font-size: 14px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>My To Do List</h1>
        <input type="text" id="taskInput" placeholder="Title...">
        <button id="addBtn">Add</button>

        <div>
            <input type="radio" name="filter" value="all" checked> <label>全部</label>
            <input type="radio" name="filter" value="waiting"> <label>Waiting</label>
            <input type="radio" name="filter" value="doing"> <label>Doing</label>
            <input type="radio" name="filter" value="finished"> <label>Finished</label>
        </div>

        <ul id="taskList"></ul>
    </div>

    <script type="module">
        class Task {
            constructor(title) {
                this.title = title;
                this.status = 'waiting';
            }
        }

        class TaskManager {
            constructor() {
                this.tasks = [];
            }

            addTask(title) {
                this.tasks.push(new Task(title));
            }

            deleteTask(index) {
                this.tasks.splice(index, 1);
            }

            toggleTaskStatus(index) {
                const statuses = ['waiting', 'doing', 'finished'];
                const task = this.tasks[index];
                const currentIndex = statuses.indexOf(task.status);
                task.status = statuses[(currentIndex + 1) % 3];
            }

            filterTasks(filter) {
                if (filter === 'all') return this.tasks;
                return this.tasks.filter(task => task.status === filter);
            }
        }

        const taskManager = new TaskManager();
        const taskInput = document.getElementById('taskInput');
        const taskList = document.getElementById('taskList');
        const addBtn = document.getElementById('addBtn');
        const filters = document.querySelectorAll('input[name="filter"]');

        const renderTasks = (tasks) => {
            taskList.innerHTML = '';
            tasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.textContent = `${task.title}`;
                li.classList.add(task.status);
                li.addEventListener('click', () => {
                    taskManager.toggleTaskStatus(index);
                    updateView();
                });

                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    taskManager.deleteTask(index);
                    updateView();
                });

                li.appendChild(deleteBtn);
                taskList.appendChild(li);
            });
        };

        const updateView = () => {
            const selectedFilter = document.querySelector('input[name="filter"]:checked').value;
            renderTasks(taskManager.filterTasks(selectedFilter));
        };

        addBtn.addEventListener('click', () => {
            const title = taskInput.value.trim();
            if (title) {
                taskManager.addTask(title);
                taskInput.value = '';
                updateView();
            }
        });

        filters.forEach(filter => {
            filter.addEventListener('change', updateView);
        });

        updateView();
    </script>
</body>

</html>